<template>
  <div
    class="fixed -translate-x-1/2 bottom-2 left-1/2 text-foreground"
    :style="{ zIndex: CONTENT_ZINDEX.toolbar }"
  >
    <div
      v-motion
      class="relative flex items-center gap-4"
      :initial="{ opacity: 0, y: 100 }"
      :enter="{ opacity: 1, y: 0 }"
      :leave="{ opacity: 0, y: -100 }"
      :delay="100"
    >
      <div class="flex items-center gap-1 p-1 border bg-background rounded-xl">
        <UiTooltip label="Interactive">
          <button
            :class="[
              'toolbar-button',
              { active: appProvider.state.interactive },
            ]"
            @click="
              appProvider.updateState({
                interactive: !appProvider.state.interactive,
              })
            "
          >
            <MousePointerClickIcon class="inline-block" />
          </button>
        </UiTooltip>
        <UiTooltip label="Show grid">
          <button
            :class="['toolbar-button', { active: appProvider.state.showGrid }]"
            @click="
              appProvider.updateState({
                showGrid: !appProvider.state.showGrid,
              })
            "
          >
            <Grid3X3Icon class="inline-block" />
          </button>
        </UiTooltip>
      </div>

      <!-- <div class="flex items-center gap-1 p-1 border bg-background rounded-xl">
        <UiTooltip label="Interactive">
          <button :class="['toolbar-button']" @click="startTypingHandle">
            <Keyboard class="inline-block" />
          </button>
        </UiTooltip>
      </div> -->

      <div class="relative">
        <div
          v-if="activeTool === 'custom-css'"
          v-motion
          class="absolute max-w-md mb-2 border rounded-lg bg-popover bottom-full left-1/2 min-w-80 min-h-20 group/content"
          :initial="{ y: 10 }"
          :enter="{ y: 0 }"
          :leave="{ y: -10 }"
          style="translate: -50%"
        >
          <button
            class="absolute z-50 flex items-center justify-center w-8 h-8 transition scale-0 border rounded-md -top-3 -right-3 bg-secondary group-hover/content:scale-100"
            @click="activeTool = ''"
          >
            <XIcon class="w-5 h-5" />
          </button>
          <!-- <component :is="toolCompsMap[activeTool]" /> -->
          <component :is="toolCompsMap['custom-css']" />
        </div>
        <div class="flex gap-1 p-1 border bg-background rounded-xl">
          <UiTooltip v-for="tool in tools" :key="tool.id" :label="tool.name">
            <button
              :class="[
                'toolbar-button indicator',
                { active: tool.id === activeTool },
              ]"
              @click="toolChangeHandle(tool)"
            >
              <component :is="tool.icon" class="inline-block" />
              <span
                v-if="
                  tool.id === 'custom-css' &&
                  (addedCustomCSSCount || appProvider.state.hasGlobalCSS)
                "
                class="absolute w-2 h-2 text-xs bg-red-500 rounded-md text-zinc-100 -top-0 -right-0"
              />
            </button>
          </UiTooltip>
        </div>
      </div>
      <div class="flex items-center p-1 border bg-background rounded-xl">
        <UiTooltip label="Pause">
          <button
            class="toolbar-button"
            @click="
              appProvider.updateState({ paused: !appProvider.state.paused })
            "
          >
            <PauseIcon v-if="!appProvider.state.paused" class="inline-block" />
            <PlayIcon v-else class="inline-block" />
          </button>
        </UiTooltip>
        <hr class="w-px h-6 mx-1 bg-border" />
        <UiTooltip label="Close">
          <button class="toolbar-button" @click="appProvider.destroy">
            <PowerIcon class="inline-block" />
          </button>
        </UiTooltip>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { CONTENT_ZINDEX } from '@root/src/utils/constant';
import {
  Grid3X3Icon,
  Layers3Icon,
  MousePointerClickIcon,
  PauseIcon,
  PlayIcon,
  Keyboard,
  Code2Icon,
  FileImageIcon,
  PaletteIcon,
  PowerIcon,
  XIcon,
} from 'lucide-vue-next';
import { useAppProvider } from '../app-plugin';
import ToolbarAssets from './toolbar/ToolbarAssets.vue';
import ToolbarCustomCSS from './toolbar/ToolbarCustomCSS.vue';
import { Component, computed, shallowRef } from 'vue';
import { emitter } from '@root/src/lib/mitt';
import ToolbarEyeDropper from './toolbar/ToolbarEyeDropper.vue';
import ToolbarNavigator from './toolbar/ToolbarNavigator.vue';
import ToolbarColorPalette from './toolbar/ToolbarColorPalette.vue';
import UiTooltip from '@root/src/pages/components/ui/UiTooltip.vue';
// import { startTyping } from '../../../../utils/helper';

const toolCompsMap: Record<string, Component> = {
  assets: ToolbarAssets,
  navigator: ToolbarNavigator,
  'custom-css': ToolbarCustomCSS,
  'eye-dropper': ToolbarEyeDropper,
  'color-palette': ToolbarColorPalette,
};
const tools = [
  { id: 'navigator', name: 'Navigator', icon: Layers3Icon },
  { id: 'custom-css', name: '记事本', icon: Code2Icon },
  // { id: 'assets', name: 'Graphic Assets', icon: FileImageIcon },
  // { id: 'color-palette', name: 'Color Palettes', icon: PaletteIcon },
];
// if (window.EyeDropper) {
//   tools.push({ id: 'eye-dropper', name: 'Eye dropper', icon: PipetteIcon });
// }
const elementVisible = shallowRef(false);
const elementVisibleHandle = (visible: boolean) => {
  emitter.emit('content:element-visible', {
    visible: visible,
  });
};
const activeTool = shallowRef('');
const toolChangeHandle = (tool: { id: string }) => {
  if (tool.id === 'navigator') {
    elementVisible.value = !elementVisible.value;
    elementVisibleHandle(elementVisible.value);
  }
  activeTool.value = tool.id === activeTool.value ? '' : tool.id;
};

const appProvider = useAppProvider();

const addedCustomCSSCount = computed(
  () => Object.keys(appProvider.styleData.dirtyItems.value).length,
);
</script>
